import React, { FC, createElement, useMemo } from 'react';
import { Select, Tag } from 'antd';
import { getColor } from '../../checkbox-group/utils';

export const BaseFieldSelect: FC<any> = (props) => {
  const { columnConfig, style, className, value, onChange, selectProps, innerProps } = props;

  const newValue = useMemo(() => {
    const v = value || columnConfig?.defaultValue;
    return typeof v === 'string' ? v.split(',') : v;
  }, [value, columnConfig?.defaultValue]);
  return (
    <Select
      {...selectProps}
      {...innerProps}
      style={{ ...style, width: '100%' }}
      className={className}
      // showSearch
      value={newValue}
      onChange={onChange}
      placeholder={columnConfig?.placeholder || ''}
      optionFilterProp="children"
      filterOption={(input, option) =>
        ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
      }
    >
      {columnConfig?.options?.map((item) => {
        return (
          <Select.Option key={item.value} value={item.value}>
            {columnConfig.hasColor ? (
              <Tag color={getColor(item.color!)}>{item.label}</Tag>
            ) : (
              item.label
            )}
          </Select.Option>
        );
      })}
    </Select>
  );
};
